<template>
  <div>
    <van-nav-bar title="物流详情" left-arrow @click-left="backUp" />
    <div class="info">
      <img :src="info.express_image" alt />
      <div>
        <h3>{{desc}}</h3>
        <p>{{info.express_company}}:{{info.express_no}}</p>
        <p>客服电话:{{info.express_kefu}}</p>
      </div>
    </div>
    <van-steps direction="vertical" :active="0" active-color="#FBA86F">
      <van-step v-for="item in progress" :key="item.time">
        <h3>{{item.content}}</h3>
        <p>{{item.time}}</p>
      </van-step>
    </van-steps>
  </div>
</template>
<script>
import { NavBar, Step, Steps, Button } from "vant";
import api from "@/utils/api";
export default {
  name: "logistics",
  components: {
    [NavBar.name]: NavBar,
    [Step.name]: Step,
    [Steps.name]: Steps,
    [Button.name]: Button
  },
  data() {
    return {
      progress: [],
      info: {},
      desc: ""
    };
  },
  mounted() {
    this.selectExpress();
  },
  methods: {
    selectExpress() {
      this.$axios({
        method: "GET",
        url: api.express,
        params: {
          token: localStorage.getItem("token"),
          order_id: this.$route.query.order_id
        }
      }).then(res => {
        console.log(res.data);
        this.info = res.info;
        this.progress = res.progress;
        this.desc = res.desc;
      });
    },
    backUp() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
@import "~style/common.less";

.info {
  display: flex;
  align-items: center;
  margin: 3px 0 10px 0;
  padding: 15px;
  background-color: #fff;
  img {
    width: 68px;
    height: 68px;
    margin-right: 15px;
  }
  h3 {
    margin-bottom: 5px;
    .font-dpr(14px);
    color: @priColor;
  }
  p {
    .font-dpr(12px);
    color: #333;
  }
}
</style>
